<template>
  <div>
    <div class="menu-box">
      <ul class="menu-list">
        <li :class=" page=='DefaultPage'?'active':'' " @click="changeHash('DefaultPage')">默认页面</li>
        <li :class=" page=='ErrorPage'?'active':'' " @click="changeHash('ErrorPage')">错误处理</li>
        <li :class=" page=='AssetsPage'?'active':'' " @click="changeHash('AssetsPage')">静态资源处理</li>
        <li :class=" page=='StylePage'?'active':'' " @click="changeHash('StylePage')">样式处理</li>
        <li :class=" page=='LessPage'?'active':'' " @click="changeHash('LessPage')">动态样式</li>
        <li :class=" page=='AjaxNotUtil'?'active':'' " @click="changeHash('AjaxNotUtil')">ajax非工具应用</li>
        <li :class=" page=='AxiosUsePage'?'active':'' " @click="changeHash('AxiosUsePage')">axios的使用规则</li>
        <li :class=" page=='AjaxCors'?'active':'' " @click="changeHash('AjaxCors')">模块化项目的跨域分类</li>
        <li :class=" page=='AjaxUtil'?'active':'' " @click="changeHash('AjaxUtil')">axios工具模块化&Vue全局功能</li>
      </ul>
    </div>
    <component class="content" :is="page"></component>
  </div>
</template>

<script>
import DefaultPage from "@/pages/DefaultPage.vue"
import ErrorPage from '@/pages/ErrorPage.vue'
import AssetsPage from '@/pages/AssetsPage.vue'
import StylePage from '@/pages/StylePage.vue'
import LessPage from '@/pages/LessPage.vue'
import AjaxNotUtil from '@/pages/AjaxNotUtil.vue'
import AxiosUsePage from '@/pages/AxiosUsePage.vue'
import AjaxCors from '@/pages/AjaxCors.vue'
import AjaxUtil from '@/pages/AjaxUtil.vue'

export default {
  components: {
    DefaultPage,ErrorPage,AssetsPage,StylePage,LessPage,AjaxNotUtil,
    AxiosUsePage,AjaxCors,AjaxUtil
  },
  data() {
    return {
      page: "",
    };
  },
  methods:{
    changeHash(comp){
      location.hash = "/"+comp
    },
    initPageValue(){
      let comp = location.hash.replace(/^#/,"")
      console.log(comp);
      if(comp==""){
        // this.page = "DefaultPage"
        location.hash = "/DefaultPage"
      }else{
        // this.page = comp;
        location.hash = "";
        location.hash = comp;
      }
    },
    listenerHashChange(){
      // 监听浏览器的hash变化
      window.onhashchange = ()=>{
        console.log( location.hash );
        let comp = location.hash.replace(/^#\//,"")
        console.log(comp);
        this.page = comp;
      }
      
      this.initPageValue();
    }
  },
  mounted(){
    this.listenerHashChange();
  }
};
</script>

<style scoped>
.menu-box {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 60px;
  background-color: #333;
  box-shadow: 0 0 12px black;
  z-index: 99999;
}
.menu-list {
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-flow: row nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  user-select: none;
}
.menu-list > li {
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  height: 100%;
  margin: 0px 10px;
  padding: 0px 10px;
  color: white;
  display: flex;
  align-items: center;
}
.menu-list > li.active{
  background-color: orangered;
}
.menu-list > li:hover {
  background-color: orangered;
}
.content {
  margin-top: 100px!important;
  padding-bottom: 600px;
}
</style>